<template>
  <div id="contextmenu" class="contextmenu" v-if="memuData.length>0" ref="contextmenu">
    <div
      class="contextmenu__item"
      v-for="item in memuData"
      :key="item.id"
      @click="handClick(item)"
      :class="itemCls(item)"
    >{{item.text}}</div>
    <!-- <div class="contextmenu__item" @click="handleTwo()">菜单二</div>
    <div class="contextmenu__item" @click="handleThree()">菜单三</div>-->
  </div>
</template>

<script>
export default {
  name: "contextmenu",
  props: {
    memuData: { // 菜单数据
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
    };
  },
  methods: {
    itemCls (item) {
      return {
        disabled: item.disabled
      };
    },

    // 处理菜单项点击事件
    handClick (item) {
      if (item.disabled) {
        return;
      }
      if (item.fn) {
        item.fn();
      } else {
        this.$emit("click", item);
      }
    },
    init (row, column, event) {
      if (this.memuData.length === 0) {
        return;
      }
      // 设置菜单出现的位置
      let menu = document.querySelector("#contextmenu");
      console.log(event);
      // 防止菜单太靠底，根据可视高度调整菜单出现位置
      // if (cha < 150) {
      //   menu.style.top = event.clientY + "px";
      // } else {
      //   menu.style.top = event.clientY + "px";
      // }
      console.log(this.$refs.contextmenu.offsetWidth);
      console.log(event.clientY);
      menu.style.top = (event.clientY - 80) + "px";
      menu.style.left = (event.offsetX + 50) + "px";
      document.addEventListener("click", this.foo); // 给整个document添加监听鼠标事件，点击任何位置执行foo方法

    },
    foo () {
      this.$emit("foo");
    }
  }
};
</script>

<style scoped lang="less">
.contextmenu__item {
  display: block;
  line-height: 34px;
  text-align: center;
}
.contextmenu__item:not(:last-child) {
  border-bottom: 1px solid rgba(64, 158, 255, 0.2);
}
.contextmenu {
  position: absolute;
  background-color: #fff;
  width: 100px;
  /*height: 106px;*/
  font-size: 12px;
  color: #666;
  border-radius: 4px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid rgba(64, 158, 255, 0.2);
  white-space: nowrap;
  z-index: 1000;
}
.contextmenu__item:hover {
  cursor: pointer;
  background: #66b1ff;
  border-color: #66b1ff;
  color: #fff;
}

.contextmenu__item.disabled {
  cursor: not-allowed;
  // background: #66b1ff;
  color: #dddddd;
  border-color: #66b1ff;
  // color: #fff;
}
</style>